<style>
    .count-block {
        display: flex;
        margin-top: 20px;
    }
    .layui-anim-upbit {
        height: 400px;
        overflow-y: auto !important;
        min-height: 400px !important;
    }
</style>

<div class="layui-card-body">
    <div class="layui-row layui-col-space15 layui-form-pane layui-form" lay-filter="search_form">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">集运单号</label>
                <div class="layui-input-block">
                    <input class="layui-input" id="trans_no" type="text" value="{$trans_info.trans_no|default=''}" readonly>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">所属仓库</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" value="{$trans_info.warehouse_name|default=''}" readonly>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">寄往国家</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" value="{$trans_info.to_country_name|default=''}" readonly>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">目的仓库</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" value="{$trans_info.to_warehouse_name|default=''}" readonly>
                </div>
            </div>
        </div>
    </div>

    <div class="count-block">
        <div class="count-item">
            <span>包裹数量：</span>
            <span id="package_num">0</span>
        </div>
    </div>
    <table class="layui-table" id="goods_list" lay-filter="goods_list"></table>
</div>

<script>
    $(function() {
        let table = layui.table;
        let form = layui.form;
        let trans_no = $('#trans_no').val();

        table.render({
            elem: '#goods_list',
            even: true,
            height: '500',
            url: '{:url("getTransPackageList")}',
            where: {trans_no: trans_no},
            cols: [[
                {field: 'warehouse_name', title: '{:lang("仓库")}', minWidth: 150, align: 'center'},
                // {field: 'platform_name', title: '{:lang("平台")}', minWidth: 150, align: 'center' , hide:!account_show},
                {field: 'account_name', title: '{:lang("公司")}', minWidth: 150, align: 'center'},
                {field: 'order_no', title: '{:lang("订单号")}', minWidth: 150, align: 'center'},
                {field: 'express_company', title: '{:lang("物流公司")}', minWidth: 100, align: 'center'},
                {field: 'express_no', title: '{:lang("运单号码")}', minWidth: 150, align: 'center'},
                //{field: 'num', title: '{:lang("商品数量")}', minWidth: 90, align: 'center'},
                {field: 'location_code', title: '{:lang("货位")}', align: 'center', minWidth: 100},
                // {field: 'status_name', title: '{:lang("状态")}', align: 'center', minWidth: 100},
                {field: 'into_time', title: '{:lang("入库时间")}', align: 'center', minWidth: 150},
            ]],
            done: function(res, curr, count, origin) {
                $('#package_num').text(count);
            }
        });

        // 选择国家
        form.on('select(select_country)', function(obj) {
            // 获取海外仓列表
            let value = obj.value;
            httpRequest('{:url("getWarehouseAbroadList")}', {country_id: value}, 'get', function(msg, res) {
                let html = '<option value="">请选择</option>';
                for (let i in res) {
                    html += '<option value="'+i+'">'+res[i]+'</option>';
                }
                $('#to_warehouse_id').html(html);
                form.render();
            })
        });

        // 生成集运单号
        $('#createTransNo').on('click', function() {
            let data = form.val('search_form');
            if(!isNotEmpty(data.trans_no)) { // 创建需要验证填写信息
                if(!isNotEmpty(data.warehouse_id)) {
                    layer.msg('{:lang("请选择仓库")}', {icon: 2});
                    return false;
                }
                if(!isNotEmpty(data.to_country_id)) {
                    layer.msg('{:lang("请选择寄往国家")}', {icon: 2});
                    return false;
                }
                if(!isNotEmpty(data.to_warehouse_id)) {
                    layer.msg('{:lang("请选择目的仓库")}', {icon: 2});
                    return false;
                }
            }
            httpRequest('{:url("createTransNo")}', data, 'post', function(msg, res) {
                // 生成成功
                layer.msg(msg, {icon: 1});
                // 赋值渲染
                if(isNotEmpty(data.trans_no)) { // 搜索集运单时
                    let html = '<option value="">请选择</option>';
                    for (let i in res.warehouse_abroad_list) {
                        html += '<option value="'+i+'">'+res.warehouse_abroad_list[i]+'</option>';
                    }
                    $('#to_warehouse_id').html(html);

                    form.val('search_form', {
                        to_country_id: res.trans_info.to_country_id,
                        to_warehouse_id: res.trans_info.to_warehouse_id,
                        warehouse_id: res.trans_info.warehouse_id
                    });
                    // 更新表格
                    table.reload('goods_list', {
                        where: {trans_no: data.trans_no}
                    });

                } else { // 生成新的
                    if(isNotEmpty(res.trans_no)) {
                        form.val('search_form', {
                            warehouse_id: res.trans_no
                        });
                    }
                }
            })
        })

        // 添加包裹
        $('#search_package_btn').on('click', function() {
            let data = form.val('package_form');
            let trans_data = form.val('search_form');
            if(!isNotEmpty(trans_data.trans_no)) {
                layer.msg('{:lang("集运单号不能为空")}', {icon: 2});
                return false;
            }
            if(!isNotEmpty(data.package_no)) {
                return false;
            }
            httpRequest('{:url("searchPackageNo")}', {package_no: data.package_no, trans_no: trans_data.trans_no}, 'get', function(msg, res) {
                layer.msg(msg, {icon: 1});
                // 更新表格
                table.reload('goods_list', {
                    where: {trans_no: trans_data.trans_no}
                });
            })
        })
    })
</script>
